<template>
  <div class="main">
    <Nav />
    <div class="right_route">
      <div class="top_content">
        <div class="item">
          <span>部门名称：</span>
          <div>
            <el-input v-model="infor.employee_namer" placeholder="请输入部门名称" size="large" style="width: 300px" />
          </div>
          <div class="right_search">
            <el-button type="primary" size="large" @click="find_data">查询</el-button>
            <el-button type="info" size="large" @click="reset">重置</el-button>
          </div>
        </div>
      </div>
      <div class="add_data">
        <el-button type="primary" size="large" @click="add_data">+ 新建</el-button>
      </div>
      <div class="table">
        <Table :list="table_list" @change="change_data" @setPer="setPer" />
      </div>
      <div class="pagination">
        <Pagination :list="page_list" :limit="limit" @change="page_change" />
      </div>
    </div>
    <el-dialog v-model="dialogVisible" :title="ruleForm.id ? '修改部门' : '创建部门'" width="35%" @close="close_data">
      <div>
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="80px" class="demo-ruleForm"
          size="large">
          <el-form-item label="部门名称" prop="uName">
            <el-input v-model="ruleForm.uName" autocomplete="off" placeholder="请输入部门名称" />
          </el-form-item>
          <el-form-item label="登录限制" prop="login_limit">
            <el-radio-group v-model="ruleForm.login_limit" size="large">
              <el-radio-button label="1">
                全部
              </el-radio-button>
              <el-radio-button label="2">
                后台管理
              </el-radio-button>
              <el-radio-button label="3">
                维护管理
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="部门描述" prop="description">
            <el-input v-model="ruleForm.description" type="textarea" resize="none" maxlength="100" placeholder="请输入内容"
              show-word-limit />
          </el-form-item>
          <el-form-item label="部门状态" prop="staus">
            <el-switch v-model="ruleForm.staus" :active-value="1" :inactive-value="0" />
          </el-form-item>
          <div class="submit_button">
            <el-button type="info" @click="close">取消</el-button>
            <el-button type="primary" @click="submitForm(ruleFormRef)" class="button">保存</el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
    <el-dialog v-model="dialogVisible_per" title="设置权限" width="35%" @close="close_data" :destroy-on-close="true">
      <div>
        <el-tree :data="per_list" show-checkbox node-key="id" :props="defaultProps"  ref="el_tree"/>
        <div class="submit_button">
            <el-button type="info" @click="close_dialogVisible_per">取消</el-button>
            <el-button type="primary" @click="set_per_list" class="button">保存</el-button>
          </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reload } from "@/utils/flushed"
import { onMounted, ref, reactive } from 'vue'
import { get_dept_list, change_dept_list, get_permissions_list } from "@/request/api/dept.ts"
import type {
  FormInstance
} from "element-plus";
import Nav from "@/components/public/nav.vue"
import Table from "@/components/permissions/dept_table.vue"
const ruleFormRef = ref<FormInstance>();
const infor = reactive({
  employee_namer: '',
})
const defaultProps = {
  children: 'children',
  label: 'title',
}
let per_list: any = ref()
let el_tree:any = ref(null)
// 权限弹框开关
let dialogVisible_per = ref(false)
const ruleForm = reactive({
  id: undefined,
  uName: "",
  login_limit: "1",
  description: "",
  staus: 1
});
let table_list = ref("")
let page_list = ref("")
let dialogVisible = ref(false)
const limit = ref(10)
let params_init = {
  limit: limit.value,
  page: 1
}
let add_data = () => {
  ruleForm.id = undefined
  dialogVisible.value = true
}
const submitForm = async (ruleFormRef: any) => {
  if (!ruleFormRef) return
  await ruleFormRef.validate(async (valid: any) => {
    if (valid) {
      let data: any = await change_dept_list({ role_name: ruleForm.uName, parent_id: 0, description: ruleForm.description, style: ruleForm.login_limit, status: ruleForm.staus, id: ruleForm.id })
      console.log(data);
      if (data.message == "success") {
        if (ruleForm.id) {
          ElMessage({
            message: '修改成功',
            type: 'success',
          })
        } else {
          ElMessage({
            message: '添加成功',
            type: 'success',
          })
        }
        reload()
      } else {
        ElMessage.error(data.message)
      }
    } else {
      // console.log('error submit!', fields)
    }
  })
}
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入部门名称"));
  }
  callback();

};
const rules = reactive({
  uName: [{
    validator: validatePass,
    trigger: "blur",
    required: true,
  },],
  login_limit: [{
    validator: validatePass,
    trigger: "blur",
    required: true,
  },]
});
// 获取列表数据
const get_dept_data_list = async () => {
  let { data } = await get_dept_list(params_init)
  table_list.value = data.list
  page_list.value = data.pageData
  console.log(data, "data");
}

// 关闭弹框
const close = () => {
  dialogVisible.value = false
}
// 查询接口
const find_data = async () => {

  let { data } = await get_dept_list({ role_name: infor.employee_namer })
  table_list.value = data.list
  page_list.value = data.pageData
}
// 页数发生改变
const page_change = (val: any) => {
  params_init.page = val
  get_dept_data_list()
}
// 重置
function reset() {
  infor.employee_namer = ""
  params_init.page = 1
  get_dept_data_list()

}
// 修改
const change_data = (row: any) => {
  console.log(row, "row");

  ruleForm.id = row.id
  ruleForm.uName = row.role_name
  ruleForm.login_limit = row.style
  ruleForm.description = row.description
  ruleForm.staus = row.status
  dialogVisible.value = true
}
const close_data = () => {
  ruleForm.id = undefined
  ruleForm.uName = ""
  ruleForm.login_limit = "1"
  ruleForm.description = ""
  ruleForm.staus = 1
}
// 获取权限列表
const get_per_list = async () => {
  let { data } = await get_permissions_list()
  console.log(data, "权限");
  per_list.value = data
}
const setPer = (row: any) => {
  console.log(row, "row");
  ruleForm.id = row.id
  ruleForm.uName = row.role_name
  dialogVisible_per.value = true
}
const set_per_list =async ()=>{
  console.log(el_tree.value.getCheckedNodes(),"rowrowrowrowrow");
  let arr = el_tree.value.getCheckedNodes()
  let ids:any = []
  arr.forEach((item:any)=>{
    ids.push(item.id)
  })
  let data: any = await change_dept_list({ id: ruleForm.id ,permission_id :ids,role_name:ruleForm.uName})
  console.log(data,ids,"dads");
  if (data.code == 0) {
        ElMessage({
          message: '设置成功',
          type: 'success',
        })
        close_dialogVisible_per()
      } else {
        ElMessage.error(data.message)
      }
}
const close_dialogVisible_per = ()=>{
  ruleForm.id = undefined
  ruleForm.uName = ''
  dialogVisible_per.value = false
}
onMounted(() => {
  get_dept_data_list()
  get_per_list()
})
</script>

<style lang="scss" scoped>
.main {
  display: flex;

  .right_route {
    padding: 10px 20px 0 20px;
    flex: 1;
    box-sizing: border-box;

    .top_content {
      display: flex;
      border: 1px solid rgba(242, 242, 242, 1);
      padding: 20px 10px;
      width: 100%;
      box-sizing: border-box;

      .item {
        display: flex;
        align-items: center;
        margin-right: 20px;

        span {
          display: inline-block;
          width: 70px;
          @include font(rgba(0, 0, 0, 0.8470588235294118), 14, 22);
        }

        .right_search {
          margin-left: 50px;
        }
      }
    }

    .add_data {
      margin: 20px 0;
      text-align: right;
    }

    .table {
      min-height: 400px;
    }

    .pagination {
      margin: 20px 0;
      display: flex;
      justify-content: right;
    }
  }
}

.submit_button {
  padding-top: 20px;
  border-top: 1px solid rgb(242, 242, 242);
  text-align: right;
}

:deep(.el-textarea__inner) {
  height: 100px;
}

:deep(.el-dialog__body) {
  padding-left: 50px;
  padding-right: 50px;
}

:deep(.el-dialog__header) {
  background: rgba(245, 245, 245, 1);
  margin-right: 0;
  padding: 10px 20px;
}

:deep(.el-dialog__headerbtn) {
  display: none;
}
:deep(.el-input){
  height: 32px;
}
:deep(.el-button){
  height: 32px;
}
</style>